<template>
     
<el-container class="home_container">
     <!-- 头部区域 -->

  <el-header>
      <div>
          <img src="../assets/图片1.png" alt="">
          <span>重庆城市科技学院毕业生管理系统</span>
      </div>
     <el-button type="info" @click="logout">退出</el-button>
  </el-header>

  <!-- 侧边栏 -->
  <el-container>
    <el-aside :width="isCollapse ?'64px':'200px' ">
        <div class="toggle-button" @click="toggleCollapce">|||</div>
        <el-menu 
        background-color="#333744" 
        text-color="#fff"  
        active-text-color="#409EFF" 
        >
     <!-- 以及菜单 -->
``
      <el-submenu  index="1">
        <template slot="title">
          <router-link to="/welcome" class="aa"><span>首页</span></router-link>
        </template>
      </el-submenu>

        <el-submenu  index="2">    
        <template slot="title">
          <router-link to="/users" class="aa" v-if="this.tokenn == 'admin' || this.tokenn == 'student'"><span>毕业生信息</span></router-link>
        </template>
      </el-submenu>

        <el-submenu  index="3">    
        <template slot="title">
          <router-link to="/biye" class="aa" v-if="this.tokenn == 'admin' || this.tokenn == 'student'"><span>毕业生就业信息</span></router-link>
        </template>
      </el-submenu>

        <el-submenu  index="5" v-if="this.tokenn == 'admin'">    
        <template slot="title">
          <router-link to="/bumanyi" class="aa" ><span>毕业生就业满意度</span></router-link>
        </template>
      </el-submenu>

        <el-submenu  index="4" v-if="this.tokenn == 'admin'">    
        <template slot="title">
          <router-link to="/reports" class="aa" ><span>数据分析</span></router-link>
        </template>
      </el-submenu>
      



    </el-menu>
    </el-aside>
    
    <!-- 右侧内容主体 -->
    <el-main>
        <router-view></router-view>
    </el-main>
  </el-container>



</el-container>

  
</template>

<script>
export default {
    name:'',
    data() {
        return {
            //左侧菜单数据
            menulist:[],
            //被激活的链接地址
            activePath:'',
            tokenn:''
        }
    },
    mounted(){
      this.cebianlan()
    },
    methods:{
        //点击退出跳转回登陆页
        logout(){
            window.sessionStorage.clear();
            this.$router.push("/login")
        },
        //获取所以的菜单
        //点击按钮，折叠菜单
        toggleCollapce(){
            this.isCollapse = !this.isCollapse
        },

        cebianlan(){
          const tokenStr = window.localStorage.getItem('token');
          this.tokenn = tokenStr
          console.log(this.tokenn);
        }
    },
    
}
</script>

<style lang="less" scoped>
.el-header{
    background-color: #373d41;
    display: flex;
    justify-content: space-between;
    padding-left: 0;
    align-items: center;
    color: #fff;
    font-size: 20px;
    >div{
        display: flex;
        align-items: center;
        span{
            margin-left: 15px;
        }
    }
    img{
        height: 50px;
        width: 50px;
    }
}
.el-aside{
    background-color: #333744;
    .el-menu{
        border-right: none;
    }
}
.el-main{
     background-color: #eaedf1
}
.home_container{
    height: 100vh;
}
.toggle-button{
    background-color: #4A5064;
    font-size: 10px;
    text-align: center;
    color: #fff;
    line-height: 20px;
    letter-spacing: 0.2em;
    cursor: pointer;
}
.aa{
    color: #fff;
    text-decoration:none;
}
</style>